<template>
  <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout">
    <a-form-model-item label="切换样式">
      <a-radio-group v-model="form.layout">
        <a-radio-button value="horizontal">
          水平
        </a-radio-button>
        <a-radio-button value="vertical">
           垂直
        </a-radio-button>
        <a-radio-button value="inline">
            内嵌
        </a-radio-button>
      </a-radio-group>
        <!-- 第三方登录按钮 -->
        <b @click="ding_login">钉钉登录<a-icon type="dingtalk-square" theme="filled" /></b>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
         <b @click="gitee_login">码云登录<a-icon type="google-circle" theme="filled" /></b>


    </a-form-model-item>
    <a-form-model-item label="用户名">
      <a-input v-model="username" placeholder="请您输入账号" />
    </a-form-model-item>
    <a-form-model-item label="密码">
      <a-input v-model="password" placeholder="请您输入密码" />
    </a-form-model-item>

     <!-- 图片验证码 -->
            <a-form-item label="验证码" v-bind="formlayout">
                <a-input v-model="code" placeholder="请输入验证码" />
                <img :src="src" @click="changecode" width="300">
            </a-form-item>


    <a-form-model-item :wrapper-col="buttonItemLayout.wrapperCol">
      <a-button type="primary" @click="login">
        确定
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
        username:'',
        password:"",
        code:'',
        bser_url:'http://127.0.0.1:8000/',
        src:'http://127.0.0.1:8000/my_code/',
        form: {
            layout: 'horizontal',
            fieldA: '',
            fieldB: '',
        },
    };
  },
  computed: {
    formItemLayout() {
      const { layout } = this.form;
      return layout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { layout } = this.form;
      return layout === 'horizontal'
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
  methods:{
    // 获取验证码
    changecode(){
        var num = Math.ceil(Math.random()*10);
        this.src = this.src + "?num=" + num
    },  
    ding_login(){
        window.open('http://127.0.0.1:8000/ding/')
    },
    gitee_login(){
        window.open('http://127.0.0.1:8000/gitee/')
    },
    login(){
        var formdata={
                    'username':this.username,
                    'password':this.password,
                    'code':this.code
                }
                axios({
                    url:this.base_url + 'admin_login/',
                    method:'post',
                    data:formdata
                }).then(resp =>{
                    console.log(resp.data)
                })
    }
    

  }
};
</script>

<style>
img{
    /* 改变鼠标样式 pointer(可点击样式)*/
    cursor:pointer;
}
</style>
